<template>
	<view style="height: 100vh;background-color: #f7f7f7;">
		<view class="" style="height: 25upx;">

		</view>
		<view class="inpotform">
			<form @submit="formSubmit">
				<view class="input-row"
					style="justify-content: center;color: #3478f6;font-size: 30upx;margin-bottom:25upx;"
					@tap="getlogin()">
					<text class="iconfont iconsaoyisaosaomiao" style="font-size:32upx;margin-right: 10upx;"></text>
					证件扫描
				</view>
				<view class="input-row">
					<label>中文姓名 </label>
					<input type="text" @input="fpNumInputB" v-model="form.name" placeholder="与乘客证件一致" />
				</view>
				<view class="input-row">
					<label>证件类型 </label>
					<ccPicker class="accountinput" :range="ddPlandatePriceList" k="label" v="value" v-model="form.type"
						@picker_change="country_changes"></ccPicker>

				</view>
				<view class="input-row">
					<label>证件号码 </label>
					<input @input="fpNumInputA" v-model="form.idCard" placeholder="与乘客证件一致" />
				</view>
				<view class="input-row">
					<label>证件地址 </label>
					<input type="text" v-model="form.cardAddress" placeholder="与乘客证件一致" />
				</view>

			</form>
			<view class="text1ys" style="background-color: #fff;border-radius: 12upx;">
				<view class="input-row" style="margin:0;">
					<label>手机号码 </label>
					<input type="number" @input="fpNumInputC" maxlength="11" v-model="form.phone"
						placeholder="请输入手机号码" />
				</view>
				<view class="" style="margin: 0 25upx;padding-bottom: 25upx;">
					<text class="icongantanhao iconfont" style="font-size: 34upx;margin-right: 10upx;"></text>
					需填写乘车人真实有效的手机号码，以便接收重要服务信息。儿童、老人、无手机乘客可填写亲友手机号码。
				</view>
			</view>
			<view class="btnss" @click="send()">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import ccPicker from '@/components/cc-picker/cc-picker.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			ccPicker,

		},
		data() {
			return {
				form: {
					type: '1',
					iiFlag: '1',
					idCard: '',
					cardAddress: '',
					name: '',
					phone: '',
				},
				ddPlandatePriceList: []
			}
		},
		onLoad(opiton) {
			this.findList()
			if (opiton.id) {
				this.form = JSON.parse(opiton.id)
				this.form.iiFlag = '0'
			}
		},
		methods: {
			...mapMutations(['getData']),
			getlogin: function() {

				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['copressed'],
					success(res) {
						var imgFiles = res.tempFilePaths[0]
						console.log(imgFiles)
						uni.showLoading({
							title: '扫描中...',
							mask: true
						});
						var uper = uni.uploadFile({
							url: that.$store.state.baseUrl + 'tool/findIdcardInfo',
							// filePath  需要上传的文件
							filePath: imgFiles,
							name: 'file',
							success(res1) {
								uni.hideLoading()
								var fatd = JSON.parse(res1.data)
								console.log(fatd)
								if (fatd.code == -1) {
									uni.showToast({
										title: '读取失败～',
										duration: 3000,
										icon: 'none'
									});
								} else {
									var fatass = JSON.parse(fatd.data)
									that.$set(that.form, 'idCard', fatass.idcard)
									that.$set(that.form, 'name', fatass.name)
									that.$set(that.form, 'cardAddress', fatass.address)

								}

							},
							fail: (res) => {
								uni.hideLoading();
								uni.showToast({
									title: '读取失败',
									duration: 3000,
									icon: 'none'
								});
							}
						});

					}
				})

			},
			country_changes(e) {
				this.form.type = e.new_v;
			},
			fpNumInputA(e) {
				const o = e.target;
				const inputRule = /[^\w\.\/]/ig //修改inputRule 的值
				this.$nextTick(function() {
					this.form.idCard = o.value.replace(inputRule, '');
				})
			},
			fpNumInputB(e) {
				const o = e.target;
				const inputRule = /[^\u4E00-\u9FA5]/g //修改inputRule 的值
				this.$nextTick(function() {
					this.form.name = o.value.replace(inputRule, '');
				})
			},
			fpNumInputC(e) {
				const o = e.target;
				const inputRule = /[^\d]/g //修改inputRule 的值
				this.$nextTick(function() {
					this.form.phone = o.value.replace(inputRule, '');
				})
			},
			findList() {
				var that = this
				let objP = {
					type: 'dd_passenger_type'
				}
				const obj = {
					url: 'sysDict/findList',
					data: objP,
					success(res) {
						that.ddPlandatePriceList = res.datas.list
					},
					fail(res) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
					},
					complete(res) {}
				}
				that.getData(obj)
			},
			send() {
				var that = this
				this.form.userId = uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
				if (this.form.name == "") {
					uni.showToast({
						title: '请填写姓名',
						duration: 3000,
						icon: 'none'
					});
					return false
				}
				if (this.form.type == "") {
					uni.showToast({
						title: '请选择证件类型',
						duration: 3000,
						icon: 'none'
					});
					return false
				}
				if (this.form.idCard == "") {
					uni.showToast({
						title: '请填写证件号码',
						duration: 3000,
						icon: 'none'
					});
					return false
				}
				if (this.form.cardAddress == "") {
					uni.showToast({
						title: '请填写证件地址',
						duration: 3000,
						icon: 'none'
					});
					return false
				}
				if (this.form.phone == "") {
					uni.showToast({
						title: '请填写手机号码',
						duration: 3000,
						icon: 'none'
					});
					return false
				}
				const obj = {
					url: 'ddPassenger/save',
					data: this.form,
					success(res) {
						uni.navigateBack({
							success: () => {
								let page = getCurrentPages().pop();
								if (page) {
									page.onLoad(page.options); //执行上个页面的方法
								};
							}
						})
					},
					fail(res) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
					},
					complete(res) {}
				}
				that.getData(obj)
			}
		}
	}
</script>

<style>
	.inpotform {}

	.accountinput {
		font-size: 32upx;
		flex: 6;
		white-space: nowrap;
		/*内容超宽后禁止换行显示*/
		overflow: hidden;
		/*超出部分隐藏*/
		text-overflow: ellipsis;
		/*文字超出部分以省略号显示*/
	}

	.input-row {
		display: flex;
		font-size: 32rpx;
		align-items: center;
		background: #fff;
		height: 100upx;
		margin: 2upx 25upx;
		padding: 0 20upx;
		margin-top: 0;
		border-radius: 8upx;
	}

	.input-row input {
		margin-left: 25rpx;
		font-size: 30upx;
		width: 100%;
		color: #333;
	}

	.input-row-1 {
		flex: none;
		width: 120upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 12upx;
		background-color: #7cc4a1;
		color: #fff;
		margin-left: auto;
		font-size: 30upx;
		text-align: center;
	}

	.input-row picker {
		margin-left: 25rpx;
		font-size: 30upx;
	}

	.input-row label {
		width: 190rpx;
		text-align: left;
		flex: none;
		color: #333;
		font-size: 30upx;
		color: #666;
	}

	.btnss {
		margin: 50upx 25upx;
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #3478F6;
		color: #fff;
		border-radius: 12upx;
	}

	.text1ys {
		margin: 25upx;
		font-size: 26upx;
		color: #ed732e;
	}
</style>